import { useSearchParams, useNavigate } from "react-router-dom";
import { useState, useRef, useEffect } from "react";
import "./watch.css";

import NewNavbar from "./newHead";

export default function Watch() {
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();
  // 1. 获取课程卡片传递的视频链接
 const videoPath=searchParams.get("VideoPath");
const email=searchParams.get("email");
  // 核心状态：只保留播放/暂停、进度相关
  const [isPlaying, setIsPlaying] = useState(false);
  const [currentTime, setCurrentTime] = useState(0);
  const [duration, setDuration] = useState(0);
  const videoRef = useRef(null); // 用于控制视频元素

  // 2. 视频加载完成：获取视频总时长
  const handleLoadedMetadata = () => {
    if (videoRef.current) {
      setDuration(videoRef.current.duration);
    }
  };

// 正确用法
useEffect(() => {
  // 这里放置要执行的代码
  console.log(videoPath);
  
  // 可选的清理函数
  return () => {
    // 组件卸载或依赖项变化时执行清理
  };
}, [videoPath]); 
// 依赖项数组，当 videoPath 变化时才会执行
  // 3. 播放/暂停（核心功能）
  const togglePlay = () => {
    if (videoRef.current) {
      if (isPlaying) {
        videoRef.current.pause(); // 暂停
      } else {
        videoRef.current.play(); // 播放
      }
      setIsPlaying(!isPlaying);
    }
  };

  // 4. 进度条拖动：调整播放位置
  const handleProgressChange = (e) => {
    const newTime = parseFloat(e.target.value);
    if (videoRef.current) {
      videoRef.current.currentTime = newTime;
      setCurrentTime(newTime);
    }
  };

  // 5. 实时更新播放进度
  const handleTimeUpdate = () => {
    if (videoRef.current) {
      setCurrentTime(videoRef.current.currentTime);
    }
  };

  // 6. 格式化时间：把秒数转成「分:秒」（如 01:23）
  const formatTime = (timeInSeconds) => {
    const minutes = Math.floor(timeInSeconds / 60);
    const seconds = Math.floor(timeInSeconds % 60);
    // 补0：确保是两位数（如 1秒 → 01秒）
    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  };

  // 7. 无视频链接时，显示提示
  if (!videoPath) {
    return (
      <div>
        <NewNavbar/>
        <div className="video-error">
          <h2>没有找到视频</h2>
          <p>请从课程列表选择要观看的视频</p>
          <button onClick={() => navigate('/AllVideos')} className="back-button">
            返回课程列表
          </button>
        </div>
      </div>
    );
  }

  // 8. 核心播放界面
  return (
    <div>
      <NewNavbar />
      {/* 播放器容器 */}
      <div className="video-player-page">
        <div className="video-container" onClick={togglePlay}>
          {/* 视频元素：核心播放载体 */}
          <video
            ref={videoRef}
            src={videoPath} // 加载课程传递的视频链接
            className="video-element"
            onLoadedMetadata={handleLoadedMetadata} // 加载完成后获取时长
            onTimeUpdate={handleTimeUpdate} // 实时更新进度
            onClick={togglePlay} // 点击视频播放/暂停
          />

          {/* 播放/暂停大按钮（视频中央） */}
          {!isPlaying && (
            <button className="big-play-button" onClick={togglePlay}>
              <svg width="64" height="64" viewBox="0 0 24 24" fill="white">
                <path d="M8 5v14l11-7z" /> {/* 播放图标 */}
              </svg>
            </button>
          )}

          {/* 控制栏：只保留进度条和时间 */}
          <div className="video-controls">
            {/* 进度条：拖动调整播放位置 */}
            <input
              type="range"
              min="0"
              max={duration} // 最大进度=视频总时长
              value={currentTime} // 当前进度
              onChange={handleProgressChange}
              className="progress-bar"
            />

            {/* 时间显示：当前时间 / 总时长 */}
            <div className="time-display">
              {formatTime(currentTime)} / {formatTime(duration)}
            </div>
          </div>
        </div>

        {/* 返回按钮：方便回到课程列表 */}
        <button 
          onClick={() => navigate(`/AllVideos?email=${email}`)} 
          className="back-to-courses"
        >
          返回视频列表
        </button>
      </div>
    </div>
  );
}